<template>
  <view>
    <div class="box">
      <div class="row" style="flex-direction: column; margin-left: 120px; gap: 24px">
        <div class="hint">EXCEL文件格式（注意：仅Sheet1有效）</div>
        <img src="@/assets/manage_user_batch_action.png" alt="" />
      </div>
      <div class="row">
        <div class="col">
          <div class="label">类型</div>
          <t-select v-model="form.type">
            <t-option v-for="item in typeList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
          </t-select>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label" style="margin-right: 10px">上传</div>
          <UpLoadFile v-model:file="form.fileData" ref="upload" :axios="'/member/deposit/import'"></UpLoadFile>
        </div>
      </div>
      <div class="row">
        <!-- <div class="col">
          <div class="label">安全码</div>
          <t-input type="password" v-model="form.safeCode" placeholder="请输入安全码" />
        </div> -->
      </div>
      <div class="btnBox">
        <t-button theme="primary" size="large" @click="onSubmit">立即提交</t-button>
        <t-button variant="outline" theme="default" size="large" @click="onReset">重置</t-button>
      </div>
    </div>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { getDictionaries } from '@/api/member/deposit';
import { MessagePlugin } from 'tdesign-vue-next';
import UpLoadFile from '@/components/upLoadFile/index.vue';
interface FormDataType {
  type: string | number;
  safeCode: string;
  fileData: any;
}

const INITIAL_DATA: FormDataType = {
  type: '',
  safeCode: '',
  fileData: undefined,
};

const form = ref({ ...INITIAL_DATA });
const typeList = ref([]);
// 获取类型
const unGetDictionaries = () => {
  getDictionaries({}).then((res) => {
    typeList.value = res.data;
  });
};
unGetDictionaries();
const upload = ref();
const onSubmit = async () => {
  if (!form.value.type) {
    MessagePlugin.error('请选择类型');
    return;
  }
  // if (!form.value.safeCode) {
  //   MessagePlugin.error('请输入安全码');
  //   return;
  // }
  upload.value.uploadFiles(form.value);
};

// 重置
const onReset = () => {
  form.value = { ...INITIAL_DATA };
};
</script>
<style lang="less" scoped>
.box {
  padding: 10px;

  .row {
    display: flex;
    padding: 25px 0;

    .hint {
      font-size: 16px;
      color: red;
    }

    img {
      max-width: 321px;
    }

    &:nth-child(2n) {
      // background-color: #f2f2f2;
    }

    .col {
      flex: 1;
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .label {
        width: 110px;
        font-size: 12px;
        text-align: right;
        word-wrap: break-word;
        word-break: break-word;
        color: #666;
      }

      .tag {
        min-width: 110px;
        font-size: 12px;
        color: #999;
      }
    }
  }

  .btnBox {
    display: flex;
    justify-content: center;
  }
}
</style>

<style class="less">
.col {
  .t-input__wrap {
    width: 240px;
    margin: 0 10px;

    & .t-input {
      height: 38px;
      font-size: 12px;
    }
  }

  .t-select__wrap {
    width: 240px;

    .t-select-input {
      width: 240px;
      height: 38px;
      font-size: 12px;
    }
  }

  .t-radio-group {
    margin: 0 10px;
  }

  .t-textarea {
    width: 400px;
    margin: 0 10px;

    .t-textarea__inner {
      width: 400px;
      font-size: 12px;
    }
  }

  .t-input-number.t-input-number--row {
    width: 240px;
    display: flex;
    align-items: center;
    padding: 0 38px;
    margin: 0 10px;

    .t-button.t-button--variant-outline.t-button--theme-default.t-button--shape-square.t-button--icon-only {
      width: 38px;
      height: 38px;
    }

    .t-input__wrap {
      min-width: 156px;
    }
  }
}
</style>
